/**
 * FORM 表单演示 - 提供默认值
 *
 */
import { Form, Button, Input, Switch, Checkbox, Radio,Slider } from "antd";

const App: React.FC = () => {
  //表单
  const [form] = Form.useForm();

  // 默认值
  const initialValues = {
    input: "默认值", // 这里设置输入框的默认值为 "默认值"
    switch: true,
    checkbox: true,
    radio: "pear",
    slider:"5"
  };

  //打印表单内容
  const show = () => {
    console.log(form.getFieldsValue());
  };

  return (
    <Form
      form={form}
      name="e"
      style={{ maxWidth: 600 }}
      initialValues={initialValues} // 设置表单的初始值
    >
      <Form.Item>
        <h1>提供默认值</h1>
      </Form.Item>

      <Form.Item label="输入" name="input">
        <Input />
      </Form.Item>
      <Form.Item label="切换" name="switch" valuePropName="checked">
        <Switch />
      </Form.Item>
      <Form.Item label="Checkbox" name="checkbox" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>
      <Form.Item label="Radio" name="radio">
        <Radio.Group>
          <Radio value="apple"> Apple </Radio>
          <Radio value="pear"> Pear </Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="Slider" name="slider">
        <Slider />
      </Form.Item>

      <Form.Item>
        <Button onClick={show}>打印表格</Button>
      </Form.Item>
    </Form>
  );
};

export default App;
